<template>
  <div>
    <div class="main">
      <el-form :model="params" ref="ruleForm" label-position="right" label-width="110px" size="small" class="base-search-more">
        <el-row>
          <el-col :span="6">
            <el-form-item label="月份">
              <el-date-picker style="width:100%;" v-model="params.date" type="month" value-format="yyyy-MM" placeholder="选择月" />
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item>
              <el-button type="primary"  @click="handleSizeChange(10)">查询</el-button>
              <el-button type="text" class="base-button-text-success" >
                导出
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="base-table-wrap">
        <el-table :data="tableData.list" stripe style="width: 100%" v-loading>
          <el-table-column prop="createtime" label="充值时间" min-width="120" align="center" />
          <el-table-column prop="chargemoney" :label="'充值金额（'+comConfig.unit+'）'" min-width="120" align="center" />
          <el-table-column prop="presentmoney" :label="'额外赠送金额（'+comConfig.unit+'）'" min-width="120" align="center" />
          <el-table-column prop="resultmoney" :label="'实际到账金额（'+comConfig.unit+'）'" min-width="120" align="center" />
          <el-table-column prop="chargetype" label="充值方式" min-width="120" align="center">
            <template slot-scope="scope">
              {{scope.row.chargetype === 1? '自助充值': scope.row.chargetype === 2 ? '后台充值': '未知'}}
            </template>
          </el-table-column>
          <el-table-column prop="orderno" label="充值单号" min-width="120" align="center" />
        </el-table>
      </div>
      <div class="base-pagination clearfix">
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="newPage"
          :pageSize="pageSize"
          :page-sizes="[5, 10, 15]"
          background
          layout="total,sizes, prev, pager, next, jumper"
          :total="tableData.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        params: {
          date: '',
          page:0,
          size: 10
        },
        restaurants: [],
        isloadingTable: false,
        newPage: 1,
        tableData: {},
        pageSize: 10 //分页数量
      };
    },
    methods: {
      handleSizeChange(size) { // 设置分页数量
        this.params.size = size
        this.pageSize = size
        this.newPage = 1
        this.params.page = 0
        this.getTableList()
      },
      handleCurrentChange(page) { // 切换分页
        this.params.page = page - 1
        this.getTableList()
      },
      getTableList(id) { // 获取商家列表
       const params = { ...this.params }
        params.agentId = this.$route.query.id
        this.isloadingTable = true
        this.$http.get("/server/charge/list?" + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    mounted() {
      if (this.$route.query.id) {
        this.getTableList()
      } else {
        this.$router.back()
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "./css/info.scss";
</style>
